<template>
  <view class="move-container">
    <!-- 作品 -->
    <view class="artworks-list-container">
      <!-- 头像、表情包 -->
      <!-- <ArtworksSquareList
        v-if="searchForm.type == 2 || searchForm.type == 3"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
      <!-- 壁纸 -->
      <!-- <WallpaperArtworksList
        v-if="searchForm.type == 1"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
      <!-- 动态壁纸 -->
      <!-- <BgArtworksList
        v-if="searchForm.type == 6 || searchForm.type == 8"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
      <!-- 背景 -->
      <!-- <VideoArtworksList
        v-if="searchForm.type == 4"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
      <!-- 电视剧 -->
      <!-- <TvArtworksList
        v-if="searchForm.type == 5"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
      <!-- 定制类型 -->
      <!-- <MakeAllArtworksList
        v-if="searchForm.type == 10"
        :artworks-list="artworksList"
        :is-batch="isBatch"
        :is-album="true"
        @handleCheckBox="handleCheckBox"/> -->
        <AllArtworksList
          v-if="searchForm.type !== '10'"
          :artworks-list="artworksList"
          :is-batch="isBatch"
          :is-album="true"
          @handleCheckBox="handleCheckBox"/>
        <MakeAllArtworksList
          v-if="searchForm.type == 10"
          :artworks-list="artworksList"
          :is-batch="isBatch"
          :is-album="true"
          @handleCheckBox="handleCheckBox"/>
    </view>
    <!-- 操作栏 -->
    <view class="bottom-main">
      <view class="bottom-view">
        <block v-if="!isBatch">
          <view v-if="searchForm.type != 10" @click="uploadArtworks('album')" class="bottom-view-button bottom-view-button-before">
            <u-icon name="arrow-upward" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">上传作品</text>
          </view>
          <view v-else @click="uploadMakeArtworks('album')" class="bottom-view-button bottom-view-button-before">
            <u-icon name="arrow-upward" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">上传作品</text>
          </view>
          <view class="bottom-view-button bottom-view-button-before" @click="isBatch = true">
              <u-icon name="edit-pen" color="#56d39d" size="28"></u-icon>
              <text class="bottom-view-button-text">批量操作</text>
            </view>
          <view @click="goBack()" class="bottom-view-button bottom-view-button-padding bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">返回上一页</text>
          </view>
        </block>
        <block v-else>
          <view class="bottom-view-button bottom-view-button-before bottom-view-button-padding" @click="isBatch = false">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">退出</text>
          </view>
          <view @click="handleBatchUpdateArtworks('is_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-zhiding"></text>
            <text class="bottom-view-button-text">置顶</text>
          </view>
          <view @click="handleBatchUpdateArtworks('cancel_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-quxiaozhiding"></text>
            <text class="bottom-view-button-text">取消置顶</text>
          </view>
          <view @click="goSort()" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-paixu1"></text>
            <text class="bottom-view-button-text">排序</text>
          </view>
          <view @click="handleBatchUpdateArtworks('move')" class="bottom-view-button bottom-view-button-padding bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-yidong-xuanzhong-12"></text>
            <text class="bottom-view-button-text">移动</text>
          </view>
        </block>
      </view>
    </view>
    <!-- 专辑操作栏 -->
    <SelectAlbum
      :popup-show="album.selectAlbumShow"
      :album-info="searchForm"
      :disabled-move="false"
      @close="close"
      @deleteItemAlbum="handleBatchUpdateArtworks('is_move_album');"
      @clickAlbum="moveAlbum"></SelectAlbum>
  </view>
</template>

<script>
  import ArtworksSquareList from '@/components/artworksList/artworksSquareList.vue'; // 头像、表情包
  import WallpaperArtworksList from '@/components/artworksList/artworksList3.vue'; // 壁纸
  import BgArtworksList from '@/components/artworksList/artworksBgList.vue'; // 背景
  import VideoArtworksList from '@/components/artworksList/videoArtworksList3.vue'; // 动态背景
  import TvArtworksList from '@/components/artworksList/tvArtworksList.vue'; // 电视剧
  import MakeAllArtworksList from '@/components/artworksList/makeAllArtworksList.vue'; // 全部
  import AllArtworksList from '@/components/artworksList/allArtworksList.vue'; // 全部
  import SelectAlbum from '@/components/selectAlbum/selectAlbum.vue'; // 选择专辑
  import { makeArtworksTypeAllList } from '@/api/applet';
  import { mapGetters, mapState } from 'vuex';
  import {
    findAllArtworksList,
    batchUpdateArtworks
  } from '@/api/artworks';
  export default {
    components: {
      ArtworksSquareList,
      WallpaperArtworksList,
      BgArtworksList,
      VideoArtworksList,
      TvArtworksList,
      MakeAllArtworksList,
      AllArtworksList,
      SelectAlbum
    },
    data() {
      return {
        album: {
          selectAlbumShow: false, // 选择作品集
        },
        ids: [], // 已选择的作品id集合
        isBatch: false,
        artworksList: [], // 作品列表
        searchForm: {
          author_id: '',
          type: '',
          album_id: '',
          cate_id: '',
          get_type: 'album_list'
        },
        makeArtworksTypeAllListData: []
      }
    },
    onLoad(options) {
      this.searchForm.author_id = options.author_id;
      this.searchForm.type = options.type;
      this.searchForm.album_id = options.album_id;
      this.searchForm.cate_id = options.cate_id;
      if (options.album_name) {
        uni.setNavigationBarTitle({ title: `${options.album_name}专辑` })
      }
      this.getAllArtworksList();
      this.getArtworksTypeAllListData();
    },
    computed: {
      ...mapGetters([
        'artworksTypeAllListData',
      ]),
      ...mapState({
        artworksTypeList: state => state.artworksTypeAllListData.filter(item => item.id !== 3 && item.id !== 4 && item.id !== 5),
      })
    },
    methods: {

      // 定制作品分类
      getArtworksTypeAllListData() {
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            this.makeArtworksTypeAllListData = result.data;
          }
        })
      },

      // 根据主页id和作品类型去获取作品列表
      getAllArtworksList() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        findAllArtworksList(this.searchForm).then(result => {
          uni.hideToast();
          if (result && result.data) {
            let list = result.data.list;
            list.forEach(item => {
              item.checked = false;
            })
            this.artworksList = list;
          }
        })
      },

      // 点击置顶操作 is_top 置顶 cancel_top取消置顶
      handleBatchUpdateArtworks(batchType) {
        const artworksList = this.artworksList;
        const flag = artworksList.some(item => {
          return item.checked
        })
        if (!flag) {
          uni.showToast({
            title: '请选择，在操作',
            icon: 'none'
          })
          return;
        }
        const ids = []; // id集合
        artworksList.forEach(item => {
          if (item.checked) {
            ids.push(item.id);
          } 
        })
        if (batchType === 'is_top') {
          const params = {
            album_top: 1,
            ids
          }
          this.batchUpdateArtworksFn(params);
        } else if (batchType === 'cancel_top') {
          const params = {
            album_top: 0,
            ids
          }
          this.batchUpdateArtworksFn(params);
        } else if (batchType === 'is_move_album') {
          const params = {
            is_move_album: 1,
            ids
          }
          this.batchUpdateArtworksFn(params);
        } else if (batchType === 'move') {
          this.ids = ids;
          this.album.selectAlbumShow = true;
        }
      },

      // 批量更新作品
      batchUpdateArtworksFn(params) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks(params).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
            if (params.is_move_album) {
              this.album.selectAlbumShow = false;
            }
          }
        })
      },

      // 选择移入的专辑
      moveAlbum(albumData) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks({
          album_id: albumData.id,
          ids: this.ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
            this.album.selectAlbumShow = false;
          }
        })
      },

      // 上传作品到该专辑
      uploadArtworks() {
        const currentArtworksType = this.artworksTypeAllListData.findIndex(item => item.id == this.searchForm.type);
        if (currentArtworksType != 9) {
          uni.navigateTo({
            url: `/pages/publish/publish?author_id=${this.searchForm.author_id}&currentArtworksType=${currentArtworksType}&album_id=${this.searchForm.album_id}`
          })
        } else {
          uni.showToast({
            title: '工具玩法不支持创建专辑',
            icon: 'none'
          })
        }
      },

      // 上传定制作品到该专辑
      uploadMakeArtworks() {
        const currentArtworksType = this.makeArtworksTypeAllListData.findIndex(item => item.id == this.searchForm.cate_id);
        if (this.searchForm.cate_id != 5) {
          uni.navigateTo({
            url: `/pages/publish/makePublish?author_id=${this.searchForm.author_id}&currentArtworksType=${currentArtworksType}&album_id=${this.searchForm.album_id}&type=10`
          })
        } else {
          uni.showToast({
            title: '工具玩法不支持创建专辑',
            icon: 'none'
          })
        }
      },

      // 选择作品
      handleCheckBox(val) {
        if (this.isBatch) {
          this.artworksList[val].checked = !this.artworksList[val].checked;
        }
      },

      // 前往排序
      goSort() {
        uni.navigateTo({
          url: `/pages/artworks/sort?author_id=${this.searchForm.author_id || ''}&type=${this.searchForm.type || ''}&album_id=${this.searchForm.album_id || ''}&cate_id=${this.searchForm.cate_id || ''}`
        })
      },

      // 返回
      goBack() {
        let pages = getCurrentPages();
        let pagesLength = pages.length;

        if (pagesLength > 1) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.switchTab({ url: '/pages/creativeCenter/index' });
        }
      },

      // 关闭
      close() {
        this.album.selectAlbumShow = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .move-container{
    padding: 32rpx 32rpx 120rpx 32rpx;

    .header-container{
      height: 210rpx;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 32rpx 32rpx 0 32rpx;
      background-color: #fff;
      z-index: 9;
    }

    .tabs-container{
      padding: 12rpx 0;
    }

    .bottom-main{
      position: fixed;
      bottom: calc(var(--window-bottom) + 60rpx);
      z-index: 20;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;

      .bottom-view{
        display: flex;
        justify-content: center;
        min-width: 400rpx;
        padding: 24rpx 30rpx;
        background: #fff;
        border: 2rpx solid $uni-color-primary2;
        border-radius: 92rpx;

        &-button{
          color: $uni-color-primary;
          font-size: 24rpx;
          position: relative;
          padding-right: 34rpx;
          margin-right: 34rpx;
          white-space: nowrap;

          &-text{
            color: $uni-color-primary;
            padding-left: 6rpx;
          }
        }

        &-button-before{
          &::before{
            content: "";
            position: absolute;
            right: 0;
            width: 2rpx;
            height: 32rpx;
            background: #e9e9e9;
          }
        }

        &-button-padding{
          padding-right: 16rpx;
          margin-right: 16rpx;
        }

        &-button-margin0{
          margin-right: 0;
          padding-right: 0;
        }
      }
    }
  }
</style>
